import 'package:flutter/material.dart';
import 'package:gold/app/user_provider.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/model/user_model.dart';
import 'package:gold/ui/my/settings/phone/phone_viewmodel.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/xfg_text.dart';
import 'package:provider/provider.dart';

/// @description: 修改登录手机号
/// @author tangzhentao
/// @created at 21:11 2025/1/1

class PhonePage extends StatelessWidget {
  const PhonePage({super.key});

  @override
  Widget build(BuildContext context) {
    return ProviderScaffold<PhoneViewmodel>(
      appBar: (_) => xfgAppbar(title: '修改登录手机号'),
      backgroundColor: XfgColor.white,
      model: PhoneViewmodel(),
      builder: (ctx, phone) => Column(
        children: [
          strokeHeightContainer,
          Container(
            height: XfgSize().size75,
            padding: EdgeInsets.symmetric(horizontal: XfgSize().size16),
            alignment: Alignment.centerLeft,
            child: Builder(builder: (con) {
              final isNext = con.select<PhoneViewmodel, bool>((k) => k.isNext);
              if (isNext) {
                return TextField(
                  keyboardType: TextInputType.text,
                  style: TextStyle(fontSize:XfgSize().text18, color: XfgColor.text1D),
                  maxLines: 1,
                  controller: phone.phoneController,
                  focusNode: phone.phoneNode,
                  onChanged: phone.phoneChanged,
                  onEditingComplete: () {},
                  decoration: InputDecoration(
                      isCollapsed: true,
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.zero,
                      hintStyle: TextStyle(fontSize: XfgSize().text18, color: XfgColor.text3),
                      hintText: '请输入新手机号'
                  ),
                );
              } else {
                return XfgText(_getPhone(con.select<UserProvider, UserModel>((k) => k.user).user?.mobile?.toString()?? ''), fontSize: XfgSize().text18, color: XfgColor.text1D);
              }
            }),
          ),
          /// 验证码
          Container(
            margin: EdgeInsets.only(bottom: XfgSize().size50),
            padding: EdgeInsets.symmetric(horizontal: XfgSize().size16),
            height: XfgSize().size60,
            decoration: bottomBorderDecoration,
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    style: TextStyle(fontSize: XfgSize().text18, color: XfgColor.text1D),
                    maxLines: 1,
                    controller: phone.codeController,
                    focusNode: phone.codeNode,
                    onChanged: phone.codeChanged,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                        isCollapsed: true,
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.zero,
                        hintStyle: TextStyle(fontSize: XfgSize().text18, color: XfgColor.text3),
                        hintText: '请输入您收到的验证码'
                    ),
                  ),
                ),
                SizedBox(width: XfgSize().size16),
                Builder(builder: (con) {
                  final click = con.select<PhoneViewmodel, bool>((value) => value.canCodeClick);
                  final second = con.select<PhoneViewmodel, int>((value) => value.codeSecond);
                  return InkWell(
                    onTap: click ? phone.sendCode:null,
                    child: XfgText(
                        second == 60 ? '获取验证码':'${second}S',
                        fontSize: XfgSize().text16,
                        color: click ? (second == 60 ? XfgColor.theme:XfgColor.text3):XfgColor.theme.withValues(alpha: 0.5)
                    ),
                  );
                })
              ],
            ),
          ),
          Builder(builder: (con) {
            final isNext = con.select<PhoneViewmodel, bool>((k) => k.isNext);
            final canClick = con.select<PhoneViewmodel, bool>((k) => k.canClick);
            return TextButton(
              onPressed: canClick? phone.buttonHandle:null,
              style: xfgButtonStyle(Size(XfgSize().size342, XfgSize().size50), radius: XfgSize().size50),
              child: XfgText(isNext ? '提交':'下一步', color: XfgColor.white, fontSize: XfgSize().text18),
            );
          })
        ],
      ),
    );
  }

  /// 获取手机号描述
  String _getPhone(String?  phone) {
    if (phone?.isNotEmpty == true && phone!.length == 13) {
      return '当前手机号码：${phone.substring(0, 3)}****${phone.substring(7)}';
    }
    return '当前手机号码：${phone?? ''}';
  }
}
